<div class="selector-body">
<div class="search-bar">
  <nz-input-group nzSearch nzSize="small" [nzAddOnAfter]="suffixButton">
    <input
      type="text"
      nz-input
      [placeholder]="'BasicArchives::UI:SimplyList.JButtons.SearchPlaceholder' | abpLocalization"
      [(ngModel)]="searchText"
      (keyup.enter)="search()">
  </nz-input-group>
  <ng-template #suffixButton>
    <nz-button-group>
      <button nz-button nzSize="small" (click)="search()">{{ 'BasicArchives::UI:SimplyRefSelect.Search' | abpLocalization }}</button>
      <button
        nz-button
        nzSize="small"
        nz-dropdown [nzDropdownMenu]="menuExtend"
        style="padding-left: 4px; padding-right: 4px;"
      >
        <span nz-icon nzType="down" style="font-size: 0.5em; position: relative; top: -0.2em;"></span>
        <nz-dropdown-menu #menuExtend="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="showAdvancedSearch()">{{ 'BasicArchives::UI:SimplyRefSelect.AdvancedFilter' | abpLocalization }}</li>
            <li nz-menu-item (click)="showTableSettings()">{{ 'BasicArchives::UI:SimplyRefSelect.TableSettings' | abpLocalization }}</li>
          </ul>
        </nz-dropdown-menu>
      </button>
    </nz-button-group>
  </ng-template>
</div>
<nz-table
    #basicTable
    nzSize="middle"
    [nzData]="models"
    [nzTotal]="totalCount"
    nzShowSizeChanger
    nzShowQuickJumper
    [nzFrontPagination]="false"
    [(nzPageIndex)]="currentPage"
    [(nzPageSize)]="maxResultCount"
    [nzPageSizeOptions]="[10, 15, 50, 100, 1000, 5000]"
    [nzShowTotal]="paginationTotalTemplate"
    [nzShowSizeChanger]="true"
    [nzScroll]="{ x: '100%', y: '310px' }"
  >
    <ng-template #paginationTotalTemplate let-total>
      <div style="flex: 1">
        <div *ngIf="selectedCount > 0">
          <span
            nz-icon
            [nzType]="'info-circle'"
            [nzTheme]="'fill'"
            style="font-size: 14px; color: #08c; margin-right: 5px;"
          ></span>
          <span [innerHTML]="'BasicArchives::UI:SimplyRefSelect.Pagging.SelectedTips' | abpLocalization : selectedCount"></span>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" nzGhost (click)="clearSelect()">{{ 'BasicArchives::UI:SimplyRefSelect.Pagging.SelectedTips.Buttons.Cancel' | abpLocalization }}</button>
          </nz-button-group>
        </div>
      </div>
      <div>{{ 'BasicArchives::UI:SimplyRefSelect.Pagging.PaggingTips' | abpLocalization : pageCount : total }}</div>
    </ng-template>
    <thead>
      <tr>
        <th
          nzWidth="60px"
          [nzLeft]="true"
          [nzChecked]="isAllSelected"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="targetAllSelect()"
        ></th>
        <ng-container *ngFor="let prop of entityConfig.propertys">
          <th *ngIf="prop.show" [nzWidth]="prop.width + 'px'" [nzLeft]="prop.fixed === 1" [nzRight]="prop.fixed === 2">
            {{ 'BasicArchives::ModelTitle:' + entityConfig.entityType + '.' + prop.name | abpLocalization }}
          </th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let model of basicTable.data; trackBy: track.by('id')"
        (click)="targetModelSelect(model)"
        [class.selected-row]="isModelSelected(model)"
      >
        <td
          [nzLeft]="true"
          [nzChecked]="isModelSelected(model)"
          (nzCheckedChange)="targetModelSelect(model)"
        ></td>
        <ng-container *ngFor="let prop of entityConfig.propertys">
          <td *ngIf="prop.show" [nzLeft]="prop.fixed === 1" [nzRight]="prop.fixed === 2">
            <ng-container [ngSwitch]="prop.name">
              <ng-container *ngSwitchDefault>
                <ng-container *ngIf="!!prop.html && !!prop.html(model); else defaultField">
                  <span [innerHTML]="prop.html(model)"></span>
                </ng-container>
                <ng-template #defaultField>
                  {{ prop.field(model) }}
                </ng-template>
              </ng-container>
            </ng-container>
          </td>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</div>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="cancelForm()">
    {{ 'BasicArchives::UI:SimplyRefSelect.RefEntity.Cancel' | abpLocalization }}
  </button>
  <button nz-button nzType="primary" (click)="submitForm()">
    {{ 'BasicArchives::UI:SimplyRefSelect.RefEntity.Submit' | abpLocalization }}
  </button>
</div> 